<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>在线用户管理</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script th:src="@{/js/dateFormat.js}"></script>
</head>
<body>
<h3>在线用户数：<span id="onlineCount"></span></h3>
<table>
    <tr>
        <th>序号</th>
        <th>用户名称</th>
        <th>登录时间</th>
        <th>最后访问时间</th>
        <th>主机</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
</table>
<a th:href="@{/index}">返回</a>
</body>
<script th:inline="javascript">
    var ctx = [[@{/}]];
        $.get(ctx + "online/list", {}, function(r){
            var length = r.length;
            $("#onlineCount").text(length);
            var html = "";
            for(var i = 0; i < length; i++){
                html += "<tr>"
                    + "<td>" + (i+1) + "</td>"
                    + "<td>" + r[i].username + "</td>"
                    + "<td>" + new Date(r[i].startTimestamp).Format("yyyy-MM-dd hh:mm:ss") + "</td>"
                    + "<td>" + new Date(r[i].lastAccessTime).Format("yyyy-MM-dd hh:mm:ss") + "</td>"
                    + "<td>" + r[i].host + "</td>"
                    + "<td>" + r[i].status + "</td>"
                    + "<td><a href='#' onclick='offline(\"" + r[i].id + "\",\"" + r[i].status +"\")'>下线</a></td>"
                    + "</tr>";
            }
            $("table").append(html);
        },"json");

        function offline(id,status){
            if(status == "离线"){
                alert("该用户已是离线状态！！");
                return;
            }
            $.get(ctx + "online/forceLogout", {"id": id}, function(r){
                if (r.code == 0) {
                    alert('该用户已强制下线！');
                    location.reload();
                } else {
                    alert(r.msg);
                }
            },"json");
        }
</script>
</html>